<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../common/include.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>
</head>
<body>
	<h2>用户信息管理</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>下面用户信息表格可以进行账户的管理</div>
	</div>
	<div style="margin:10px 0;"></div>
	
	<table id="dg" title="用户信息管理" style="width:auto;height:auto" class="easyui-datagrid" data-options="
				rownumbers:true,
				singleSelect:true,
				autoRowHeight:false,
				pagination:true,
				pageSize:10,toolbar:'#toolbar',url:'getUsers',fitColumns:true">
		<thead>
			<tr>
				<th data-options="field:'ck',checkbox:true"></th>
				<th field="userId" width="5%" align="center">ID</th>
				<th field="email"  width="20%" align="center">Email</th>
				<th field="password"  width="10%" align="center">密码</th>
				<th field="nickName"  width="15%" align="center">昵称</th>
				<th field="realName" width="15%" align="center">真实姓名</th>
				<th field="birthday" width="15%" align="center">生日</th>
				<th field="registerDate" width="15%" align="center">注册日期</th>
				<th field="lastLoginTime" width="15%" align="center">最后登录时间</th>
				<th field="loginTimes" width="5%" align="center">登录次数</th>
				<th field="longitude" width="10%" align="center">经度</th>
				<th field="latitude" width="10%" align="center">纬度</th>
				<th field="roles" width="10%" align="center" formatter="formatRoles">用户角色</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">创建新用户</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeUser()">删除用户</a>
		<div>  
                                    查询条件: <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:300px">  
    	 </div>
	</div>  
	<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons">
		<div class="ftitle">创建用户</div>
		<form id="fm" method="post">
			<table>
				<tr>
					<td><label>Email:</label></td>
					<td><input name="email" class="easyui-validatebox" required="true" validType="email"></td>
				</tr>
				<tr>
					<td><label>密码:</label></td>
					<td><input name="password" class="easyui-validatebox" required="true"></td>
				</tr>
				<tr>
					<td><label>昵称:</label></td>
					<td><input name="nickName" class="easyui-validatebox"></td>
				</tr>
				<tr>
					<td><label>生日:</label></td>
					<td><input name="birthday" class="easyui-datebox"></td>
				</tr>
				<tr>
					<td><label>角色:</label></td>
					<td>
						<input class="easyui-combobox" 
		            	name="roles"  
		            	data-options="  
		                    url:'getAllRoles', 
		                    multiple:true, 
		                    valueField:'roleId',  
		                    textField:'roleName', 
		                    panelHeight:'auto'">
		            </td>
				</tr>
			</table>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
	</div>
	<script>
	var url;
	function doSearch(){
		
	}
	function newUser(){
		$('#dlg').dialog('open').dialog('setTitle','创建新用户');
		$('#fm').form('clear');
		url = 'saveUser';
	}
	function editUser(){
		var row = $('#dg').datagrid('getSelected');
		if (row){
			$('#dlg').dialog('open').dialog('setTitle','编辑用户信息');
			$('#fm').form('load',row);
			url = 'updateUser?userId'+row.userId;
		}else{
			alert("请选择一行记录");
		}
	}
	function saveUser(){
		$('#fm').form('submit',{
			url: url,
			onSubmit: function(){
				return $(this).form('validate');
			},
			success: function(result){
				$('#dlg').dialog('close');		// close the dialog
				$('#dg').datagrid('reload');
				$.messager.show({
					title: 'INFO',
					msg: result
				});
			}
		});
	}
	function removeUser(){
		var row = $('#dg').datagrid('getSelected');
		if (row){
			$.messager.confirm('Confirm','确定删除此用户?',function(r){
				if (r){
					$.post('removeUser',{userId:row.userId},function(result){
						$.messager.show({	// show error message
							title: 'INFO',
							msg: result
						});
						$('#dg').datagrid('reload');
					});
				}
			});
		}else{
			alert("请选择一行记录");
		}
	}
	function formatRoles(val,row){
		var htm = "";
		if(val){
			var obj = eval(val); 
			$.each(obj,function(index,val) {
				htm = htm + val.roleName+" ";
			}); 
		}
		return htm;
	}
	</script>
</body>
</html>